<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="static/img/logo.png" type="image/png">
    <link rel="stylesheet" href="static/css/profile.css">
    <link rel="stylesheet" href="static/css/markdown.css">
    <title>个人中心 - 智慧答题系统</title>
    <!-- KaTeX数学公式支持 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css">
    <script src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/contrib/auto-render.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/contrib/mhchem.min.js"></script>
    <!-- Markdown解析库 -->
    <script src="https://cdn.jsdelivr.net/npm/marked@11.1.1/marked.min.js"></script>
    <!-- Chart.js图表库 -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar">
        <div class="nav-container">
            <div class="nav-logo">
                <img src="static/img/logo.png" alt="Logo">
                <h2>个人中心</h2>
            </div>
            <div class="nav-menu">
                <a href="/" class="nav-link">首页</a>
                <a href="/quiz" class="nav-link">答题</a>
                <button class="logout-btn" id="logoutBtn">退出登录</button>
            </div>
        </div>
    </nav>

    <!-- 主内容区 -->
    <main class="main-content">
        <div class="profile-container">
            <!-- 用户信息卡片 -->
            <div class="user-card">
                <div class="avatar-section">
                    <div class="avatar" id="userAvatarContainer">
                        <img src="" alt="头像" class="avatar-img" id="userAvatar" style="display: none;">
                        <span class="avatar-placeholder" id="avatarPlaceholder">👤</span>
                    </div>
                    <h2 id="usernameDisplay">用户名</h2>
                    <p id="userEmail">email@example.com</p>
                </div>
                
                <div class="stats-grid">
                    <div class="stat-item">
                        <div class="stat-label">答题次数</div>
                        <div class="stat-value" id="quizCount">0</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-label">总得分</div>
                        <div class="stat-value" id="totalScore">0</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-label">平均得分</div>
                        <div class="stat-value" id="avgScore">0</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-label">注册时间</div>
                        <div class="stat-value" id="joinDate">2024-01-01</div>
                    </div>
                </div>
            </div>

            <!-- 标签页 -->
            <div class="tabs">
                <button class="tab-btn active" data-tab="overview">概览</button>
                <button class="tab-btn" data-tab="achievements">成就</button>
                <button class="tab-btn" data-tab="history">答题记录</button>
                <button class="tab-btn" data-tab="favorites">收藏夹</button>
                <button class="tab-btn" data-tab="settings">个人设置</button>
            </div>

            <!-- 概览标签页 -->
            <div id="overviewTab" class="tab-content active">
                <!-- 学习进度 -->
                <div class="progress-section">
                    <h2>学习进度</h2>
                    <div class="level-info">
                        <div class="level-badge">
                            <span class="level-text" id="userLevel">Lv.1</span>
                        </div>
                        <div class="experience-bar">
                            <div class="exp-fill" id="expFill" style="width: 0%"></div>
                            <span class="exp-text" id="expText">0/100</span>
                        </div>
                    </div>
                </div>

                <!-- 数据图表 -->
                <div class="charts-section">
                    <h2>学习数据</h2>
                    <div class="charts-grid">
                        <div class="chart-card">
                            <h3>答题趋势</h3>
                            <canvas id="quizTrendChart" width="400" height="200"></canvas>
                        </div>
                        <div class="chart-card">
                            <h3>科目分布</h3>
                            <canvas id="subjectChart" width="400" height="200"></canvas>
                        </div>
                    </div>
                </div>

                <!-- 学习目标 -->
                <div class="goals-section">
                    <h2>学习目标</h2>
                    <div class="goals-grid" id="goalsGrid">
                        <div class="goal-card">
                            <h3>每日目标</h3>
                            <div class="goal-progress">
                                <div class="progress-bar">
                                    <div class="progress-fill" style="width: 0%"></div>
                                </div>
                                <span class="progress-text">0/0</span>
                            </div>
                            <button class="btn btn-secondary btn-sm" onclick="openGoalModal('daily')">设置目标</button>
                        </div>
                        <div class="goal-card">
                            <h3>每周目标</h3>
                            <div class="goal-progress">
                                <div class="progress-bar">
                                    <div class="progress-fill" style="width: 0%"></div>
                                </div>
                                <span class="progress-text">0/0</span>
                            </div>
                            <button class="btn btn-secondary btn-sm" onclick="openGoalModal('weekly')">设置目标</button>
                        </div>
                        <div class="goal-card">
                            <h3>每月目标</h3>
                            <div class="goal-progress">
                                <div class="progress-bar">
                                    <div class="progress-fill" style="width: 0%"></div>
                                </div>
                                <span class="progress-text">0/0</span>
                            </div>
                            <button class="btn btn-secondary btn-sm" onclick="openGoalModal('monthly')">设置目标</button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 成就标签页 -->
            <div id="achievementsTab" class="tab-content">
                <div class="section-header">
                    <h2>我的成就</h2>
                    <div class="achievement-stats">
                        <span id="achievementCount">0/0</span> 已解锁
                    </div>
                </div>

                <div class="achievements-grid">
                    <div class="achievement-section">
                        <h3>已解锁成就</h3>
                        <div id="unlockedAchievements" class="achievements-list">
                            <div class="loading">正在加载...</div>
                        </div>
                    </div>
                    <div class="achievement-section">
                        <h3>未解锁成就</h3>
                        <div id="lockedAchievements" class="achievements-list">
                            <div class="loading">正在加载...</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 收藏夹标签页 -->
            <div id="favoritesTab" class="tab-content">
                <div class="section-header">
                    <h2>我的收藏</h2>
                    <div class="filter-buttons">
                        <button class="filter-btn active" data-filter="questions">题目</button>
                        <button class="filter-btn" data-filter="categories">分类</button>
                    </div>
                </div>
                <div id="favoritesList" class="favorites-list">
                    <div class="loading">正在加载...</div>
                </div>
            </div>

            <!-- 答题记录标签页 -->
            <div id="historyTab" class="tab-content">
                <div class="section-header">
                    <h2>我的答题记录</h2>
                    <div class="filter-buttons">
                        <button class="filter-btn active" data-filter="all">全部</button>
                        <button class="filter-btn" data-filter="today">今天</button>
                        <button class="filter-btn" data-filter="week">本周</button>
                    </div>
                </div>
                <div id="quizHistoryList" class="quiz-list">
                    <div class="loading">正在加载...</div>
                </div>
            </div>

            <!-- 个人设置标签页 -->
            <div id="settingsTab" class="tab-content">
                <div class="settings-section">
                    <h2>修改头像</h2>
                    <form id="uploadAvatarForm" class="settings-form">
                        <div class="form-group">
                            <label for="avatarInput">选择头像</label>
                            <div class="avatar-upload-area">
                                <img src="/static/img/default-avatar.svg" alt="当前头像" class="avatar-preview" id="avatarPreview" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
                                <div class="avatar-preview-placeholder" id="avatarPreviewPlaceholder" style="display: none;">👤</div>
                                <input type="file" id="avatarInput" accept="image/*" style="display: none;">
                                <button type="button" class="btn btn-secondary" onclick="document.getElementById('avatarInput').click()">选择图片</button>
                                <span class="file-hint">支持 JPG、PNG、GIF、WEBP 格式，最大 5MB</span>
                            </div>
                            <span class="error-message" id="avatarError"></span>
                        </div>
                        
                        <button type="submit" class="btn btn-primary" id="uploadAvatarBtn">上传头像</button>
                    </form>
                </div>

                <div class="settings-section">
                    <h2>修改个人信息</h2>
                    <form id="updateInfoForm" class="settings-form">
                        <div class="form-group">
                            <label for="updateUsername">用户名</label>
                            <input type="text" id="updateUsername" placeholder="请输入新用户名">
                            <span class="error-message" id="usernameError"></span>
                        </div>
                        
                        <div class="form-group">
                            <label for="updateEmail">邮箱</label>
                            <input type="email" id="updateEmail" placeholder="请输入新邮箱">
                            <span class="error-message" id="emailError"></span>
                        </div>
                        
                        <button type="submit" class="btn btn-primary">保存修改</button>
                    </form>
                </div>

                <div class="settings-section">
                    <h2>个性化设置</h2>
                    <form id="preferencesForm" class="settings-form">
                        <div class="form-group">
                            <label for="themeSelect">主题设置</label>
                            <select id="themeSelect">
                                <option value="light">浅色主题</option>
                                <option value="dark">深色主题</option>
                                <option value="auto">跟随系统</option>
                            </select>
                        </div>

                        <div class="form-group">
                            <label class="checkbox-label">
                                <input type="checkbox" id="notificationsEnabled">
                                启用通知
                            </label>
                        </div>

                        <div class="form-group">
                            <label class="checkbox-label">
                                <input type="checkbox" id="reminderEnabled">
                                启用学习提醒
                            </label>
                        </div>

                        <div class="form-group" id="reminderTimeGroup">
                            <label for="reminderTime">提醒时间</label>
                            <input type="time" id="reminderTime" value="09:00">
                        </div>

                        <button type="submit" class="btn btn-primary">保存设置</button>
                    </form>
                </div>

                <div class="settings-section">
                    <h2>修改密码</h2>
                    <form id="updatePasswordForm" class="settings-form">
                        <div class="form-group">
                            <label for="oldPassword">当前密码</label>
                            <input type="password" id="oldPassword" placeholder="请输入当前密码">
                            <span class="error-message" id="oldPasswordError"></span>
                        </div>

                        <div class="form-group">
                            <label for="newPassword">新密码</label>
                            <input type="password" id="newPassword" placeholder="请输入新密码（至少6位）">
                            <span class="error-message" id="newPasswordError"></span>
                        </div>

                        <div class="form-group">
                            <label for="confirmPassword">确认新密码</label>
                            <input type="password" id="confirmPassword" placeholder="请再次输入新密码">
                            <span class="error-message" id="confirmPasswordError"></span>
                        </div>

                        <button type="submit" class="btn btn-primary">修改密码</button>
                    </form>
                </div>
            </div>
        </div>
    </main>

    <!-- 消息提示 -->
    <div id="messageBanner" class="message-banner"></div>

    <!-- 学习目标设置模态框 -->
    <div id="goalModal" class="modal">
        <div class="modal-content">
            <span class="close-btn" id="closeGoalModal">&times;</span>
            <h2 id="goalModalTitle">设置学习目标</h2>
            <form id="goalForm" class="settings-form">
                <div class="form-group">
                    <label for="targetQuizzes">目标答题次数</label>
                    <input type="number" id="targetQuizzes" min="0" placeholder="请输入目标答题次数">
                </div>

                <div class="form-group">
                    <label for="targetScore">目标得分</label>
                    <input type="number" id="targetScore" min="0" max="100" placeholder="请输入目标得分（0-100）">
                </div>

                <div class="form-group">
                    <label for="targetAccuracy">目标正确率 (%)</label>
                    <input type="number" id="targetAccuracy" min="0" max="100" placeholder="请输入目标正确率（0-100）">
                </div>

                <div class="modal-buttons">
                    <button type="button" class="btn btn-secondary" onclick="closeGoalModal()">取消</button>
                    <button type="submit" class="btn btn-primary">保存目标</button>
                </div>
            </form>
        </div>
    </div>

    <!-- 答题详情弹窗 -->
    <div id="quizDetailModal" class="modal">
        <div class="modal-content">
            <span class="close-btn" id="closeModal">&times;</span>
            <h2>答题详情</h2>
            <div id="quizDetailContent">
                <div class="detail-section">
                    <h3>基本信息</h3>
                    <div class="detail-grid">
                        <div class="detail-item">
                            <span class="detail-label">答题分类</span>
                            <span class="detail-value" id="detailCategory">-</span>
                        </div>
                        <div class="detail-item">
                            <span class="detail-label">答题时间</span>
                            <span class="detail-value" id="detailTime">-</span>
                        </div>
                    </div>
                </div>

                <div class="detail-section">
                    <h3>成绩统计</h3>
                    <div class="score-stats">
                        <div class="score-item">
                            <div class="score-icon" style="background: #4caf50;">✓</div>
                            <div class="score-info">
                                <div class="score-label">答对题数</div>
                                <div class="score-value" id="detailCorrect">0</div>
                            </div>
                        </div>
                        <div class="score-item">
                            <div class="score-icon" style="background: #ff4757;">✗</div>
                            <div class="score-info">
                                <div class="score-label">答错题数</div>
                                <div class="score-value" id="detailWrong">0</div>
                            </div>
                        </div>
                        <div class="score-item">
                            <div class="score-icon" style="background: #667eea;">★</div>
                            <div class="score-info">
                                <div class="score-label">总得分</div>
                                <div class="score-value" id="detailScore">0</div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="detail-section">
                    <h3>详细分析</h3>
                    <div class="analysis-grid">
                        <div class="analysis-item">
                            <span class="analysis-label">总题数</span>
                            <span class="analysis-value" id="detailTotal">0</span>
                        </div>
                        <div class="analysis-item">
                            <span class="analysis-label">正确率</span>
                            <span class="analysis-value" id="detailAccuracy">0%</span>
                        </div>
                        <div class="analysis-item">
                            <span class="analysis-label">答题用时</span>
                            <span class="analysis-value" id="detailDuration">0分0秒</span>
                        </div>
                        <div class="analysis-item">
                            <span class="analysis-label">平均每题用时</span>
                            <span class="analysis-value" id="detailAvgTime">0秒</span>
                        </div>
                    </div>
                </div>

                <div class="detail-section">
                    <h3>答题详情</h3>
                    <div id="questionsDetailList" class="questions-detail-list">
                        <div class="loading-text">正在加载答题详情...</div>
                    </div>
                </div>

                <div class="detail-actions">
                    <button class="btn btn-secondary" id="closeDetailBtn">关闭</button>
                    <button class="btn btn-primary" id="retryQuizBtn">再来一次</button>
                </div>
            </div>
        </div>
    </div>

    <!-- JavaScript -->
    <script src="static/js/profile.js"></script>
</body>
</html>

